
<!--修改用户未实现-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>个人信息管理中心</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/pager.css">

  <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="../static/js/bootstrap-paginator.js"></script>
  <!--    <script src="js/utils.js"></script>-->
  <script src="js/pager.js"></script>

  <script>


    //渲染数据到表格
    function render_data(users){
      //清除原本数据
      $("#user_list").empty();

      //遍历用户数据将用户数据渲染到页面中
      users.map((user)=>{
        $("#user_list").append("<tr><td>"+String(user.id)+"</td><td>"+String(user.username)+"</td><td>"+String("*****")+"</td><td>"+String(user.email)+"</td><td><button id=\"update-btn\" type=\"button\" class=\"btn btn-info\" data-toggle=\"modal\"  onclick='edit1(this)' data-target=\"#updDialog\">修改</button>")
      })



    }


    //自动填充修改模态框数据
    function edit1(val){
      //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
      let value = $(val).parent().parent().find("td");
      $("#up_id").val(value.eq(1).text())
      $("#upd_name").val(value.eq(2).text())
      $("#upd_status").val(value.eq(3).text())
      $("#user_password").val(value.eq(3).text())
      $("#user_email").val(value.eq(4).text())

    }

    /*等待页面加载完成之后，向服务器请求所有用户数据*/
    $(function () {
      //初始化分页条
      let data = get_users(1,5);
      render_data(data.records);
      //获取数据的总数
      let total = data.total;
      let size= data.pageSize;
      //更新分页条
      pager(total,size);


      //给筛选用户按钮绑定事件
      $("#queryBtn").click(() =>{

        //如果username不为空，执行查询，啥也不干
          $.ajax({
            url:"/customer/selectByLikeName",
            method:"GET",
            data:{
              username:"admin"
            },
            success:(data,status)=>{
              render_data(data);
            },
            error:()=>{
              console.log("查询失败!");
            }
          })

      })

      //给修改确定按钮绑定事件
      $("#upd_Btn").click(() =>{
        let id=$("#up_id").val();
        let username = $("#upd_name").val();
        let status = $("#upd_price").val();
        let password =$("#user_password").val();
        let email=$("#user_email").val();
        console.log(id);

        $.ajax({
          url:"/customer/update",
          type:"POST",
          data:{
            id,
            username,
            status,
            password,
            email
          },
          success:(data,status)=>{
            render_data(data.records);
            console.log(data);
          },
          error:()=>{
            console.log("修改失败!");
          }
        })

      })


    })

  </script>
</head>
<body>

<!--the top nav begin-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-inner">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">茶韵商城后台系统</a>
    </div>
    <ul class="nav navbar-nav pull-right">
      <li id="fat-menu" class="dropdown">
        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-user"></span> 用户名
          <span class="glyphicon glyphicon-chevron-down"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="updateadmin.html" id="queryBtn">我的账户</a></li>

          <li role="presentation"><a role="menuitem" tabindex="-1" href="login.html">登出</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!--the top nav end-->
<!--the sidebar nav begin -->
<div class="sidebar-nav">
  <a href="index.html" class="nav-header" ><span class="glyphicon glyphicon-home"></span> 管理中心 首页</a>

  <a href="category.html" class="nav-header"><span class="glyphicon glyphicon-hd-video"></span> 分类管理</a>

  <a href="product.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 商品管理 </a>

  <a href="order.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 订单管理 </a>

  <a href="userlist.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 账户管理</a>

  <a id="outLink" href="login.html" class="nav-header" ><span class="glyphicon glyphicon-log-out"></span> 登出</a>
</div>
<!--the siderbar nav en-->

<div class="content">


  <div class="container">

    <!--管理员详细信息 -->
    <div class="panel panel-default" id="all-device-detail">
      <div class="panel-heading">
        <h5>用户详细信息</h5>

      </div>
      <table class="table">
        <thead>
        <tr>
          <th>用户编号</th>
          <th>用户名</th>
          <th>密码</th>
          <th>联系邮箱</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="user_list">
        </tbody>
      </table>
    </div>




  </div>



  <!--    修改用户模块-->
  <div class="modal fade" id="updDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel1">修改用户信息</h4>
        </div>
        <div class="modal-body row">
          <form action="#" class="form-horizontal" id="add-user1" role="form" enctype="multipart/form-data"
                id="uploadForm2" method="post">
            <div class="form-group">
              <label for="up_id" class="col-xs-4 control-label" >用户编号</label>
              <div class="col-xs-6">

                <input type="text" class="form-control" id="up_id" disabled = "disabled">
              </div>
            </div>
            <div class="form-group">
              <label for="upd_name" class="col-xs-4 control-label">用户名</label>
              <div class="col-xs-6">

                <input type="text" class="form-control" id="upd_name">
              </div>
            </div>
            <div class="form-group">
              <label for="user_password" class="col-xs-4 control-label">密码</label>
              <div class="col-xs-6">
                <!--                                <input type="hidden" id="user_pwd"/>-->
                <input type="text" class="form-control" id="user_password">
              </div>
            </div>

            <div class="form-group">
              <label for="user_email" class="col-xs-4 control-label">联系邮箱</label>
              <div class="col-xs-6">
                <!--                                <input type="hidden" id="user_em"/>-->
                <input type="text" class="form-control" id="user_email">
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button id="upd_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
          <button id="upd_Btn" type="button" class="btn btn-primary" >确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->






  <footer>
    <hr>
    <p class="pull-right">&copy; 茶韵商城后台系统</p>
  </footer>

</div>
<!--the content end -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!--全选按钮实现-->
<script>
  $(function () {
    $("#all").click(function () {
      var checked_status = this.checked;
      $("input[name=device-permission]").each(function () {
        this.checked = checked_status;
      });
    });
  });
</script>
</body>
</html>
